<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1 {
            border: 1px solid #f00;
        }
    </style>
</head>
<body>
    <h1>jquery选择器</h1>
    <p>支持CSS的所有选择器</p>
    <ul>
        <li>*：通配符</li>
        <li>.：类选择器</li>
        <li>#：ID选择器</li>
        <li>[属性名]：元素选择器</li>
        <li>属性选择器</li>
        <li>层次选择器：后代、（>）子选择器、（+）相邻兄弟、（~）同辈选择器</li>
        <li>交集、并集选择器</li>
        <li>CSS3的结构伪类也支持</li>
    </ul>
    <div class="div1">
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <p>p4</p>
        <p>p5</p>
        <p>p6</p>
        <p>p7</p>
        <p>p8</p>
        <p>p9</p>
        <p>p10</p>
    </div>
</body>
<script src="../jquery-3.6.0.min.js"></script>
<script>
    // jQuery的方法，通常就是返回当前jQuery对象，所以可以链式调用
    $(".div1>p:nth-child(odd)").css({color: "#f00"}).addClass("p1")
    // 操作class:
    // addClass: 添加指定class
    // removeClass: 删除指定class
    // toggleClass: 反转特定class
</script>
</html>